// 引入path包
const path = require('path');

// 引入html包
const HTMLWebpackPlugin = require('html-webpack-plugin');

// 引入clean包
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {

    // 模式
    mode: "development",

    // 入口文件路径
    entry: './src/index.ts',

    // 输出路径
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "bundle.js",
        environment: {
            arrowFunction: false,
            const: false
        }
    },

    devServer: {
      port: 8080,
      open: true
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                      loader: 'babel-loader',
                      options: {
                          presets: [
                              [
                                  '@babel/preset-env',
                                  {
                                      targets: {
                                        "ie": "11",
                                        "chrome": "58"
                                      },
                                      "corejs": "2",
                                      "useBuiltIns": "usage"
                                  }
                              ]
                          ]
                      }
                    },
                    'ts-loader'
                ],
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                      loader: 'postcss-loader',
                      options: {
                          postcssOptions: {
                              plugins: [
                                  [
                                      'postcss-preset-env',
                                      {
                                          browsers: "last 2 version"
                                      }
                                  ]
                              ]
                          }
                      }
                    },
                    "less-loader"
                ],
                exclude: /node_modules/
            }
        ]
    },

    resolve: {
        // 引用路径的后缀匹配
        extensions: [".ts", ".js"],
        // 路径别名
        alias: {
            "@": path.resolve(__dirname, "src"),
            "@styles": path.resolve(__dirname, "src/styles"),
            "@configs": path.resolve(__dirname, "src/configs"),
            "@modules": path.resolve(__dirname, "src/modules")
        }
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template: "./index.html"
        })
    ]
};

